//底部TAB 当天组件
<template>
  <div class="container">
    <error-tip></error-tip>
    <div v-if="!errorCode">
      <day-card :data="dayData"></day-card>
      <day-list :data="dayData"></day-list>
    </div>
  </div>
</template>

<script>
import getData from "../services/index";
import { computed, watch, onMounted } from "vue";
import { useStore } from "vuex";
import { getNowDate } from "../libs/utils";

import DayCard from "../components/DayPage/Card.vue";
import DayList from "../components/DayPage/List/index.vue";
import ErrorTip from "../components/ErrorTip";

export default {
  name: "DayPage",
  components: {
    DayCard,
    DayList,
    ErrorTip,
  },
  setup() {
    //逻辑编写区域
    const store = useStore(),
      state = store.state;

    //mounted 挂载时的钩子
    onMounted(() => {
      //将后端数据存入state里
      //getData(store, field, date);
      // getData("day", "2020-7-1");
      getData(store, "day", getNowDate("day"));
    });

    watch(
      () => {
        return state.dayData;
      },
      (value) => {
        // console.log(value.suit);
        //搬家.装修.结婚.入宅.领证.动土.出行.订婚.上梁.旅游.求嗣.修坟.赴任.修造.祈福.祭祀.解除.纳财.启钻.捕捉.嫁娶.纳采.移徙.立券.竖柱.栽种.斋醮.招赘.纳婿.取渔
        // console.log(value.suit.substring(0, 17));
        //搬家.装修.结婚.入宅.领证.动土

        value.suit = value.suit.substring(0, 17) + "...";

        //监听dayData，如果有数据变动，证明数据请求成功回来了
        store.commit("setErrorCode", 0);
      }
    );

    //抛出state里面的dayData数据
    return {
      dayData: computed(() => state.dayData),
      errorCode: computed(() => state.errorCode),
    };
  },
};
</script>

<style lang="scss" scoped>
</style>